<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app">
        <button v-on:click="hello('hello')">hello</button>
        <button v-on:click="hello('world')">world</button>
        <button @click="num++">数据：{{num}}</button>

        <!-- 不让事件传播 .stop
                禁止默认 a 标签事件 .pervent 阻止默认事件
                .self 必须要自身触发，不会参与传播-->


        <div v-on:click.once="hello('3')" style="background:red;width: 800px; height: 500px; padding:50px">
            1
            <div v-on:click.stop="hello('2')" style="background:blue;width: 40px; height: 400px;padding: 50px;">
                2
                <a v-on:click.stop.prevent="hello('1')" style="background:yellow;width: 300px; height: 300px;" href="http://baidu.com">3</a>
            </div>
        </div>

        
    </div>    
</body>
    
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    var vm =new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods: {
            hello(str){
                alert(str)
            }
        },
    })

    /*
    v-on 用于绑定事件

    语言 v-on:事件名

    简写方式 v-on:click --> @click

    只能调用 vue 中的函数和数据
    */
</script>
</html>